<template>
  <view class="forget_pwd">
    <!-- #ifndef MP-WEIXIN -->
    <my-navbar
      leftText="绑定手机"
      :height="100"
      :background="'#fff'"
      @leftClick="leftClick"
    ></my-navbar>
    <!-- #endif -->
    <view class="input_info">
      <view class="input">
        <view class="sixteen label">手机号码</view>
        <input
          type="number"
          v-model="info.mobile"
          placeholder="请输入手机号码"
          placaholder-class="placehoder_class"
        />
      </view>
      <move-verify
        class="input"
        @result="verifyResult"
        ref="verifyElement"
      ></move-verify>
      <view class="input">
        <view class="sixteen label">验证码</view>
        <view class="get_code">
          <input
            type="number"
            v-model="info.msg_code"
            placeholder="请输入验证码"
          />
          <text @click.stop="getCode">{{ tips }}</text>
        </view>
      </view>
      <view class="form_submit">
        <view class="button" @click="submit">提交</view>
      </view>
      <u-verification-code
        :seconds="seconds"
        ref="uCode"
        @change="codeChange"
      ></u-verification-code>
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue";
export default {
  components: {
    moveVerify,
  },
  data() {
    return {
      tips: "获取验证码",
      seconds: 60,
      code: "", //滑块验证得到的code
      info: {
        mobile: "",
        msg_code: "",
      },
    };
  },
  onReady() {
    getApp().setTitle();
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      let volidPhone = this.volidPhone();
      if (this.code && volidPhone) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          $https(
            "GETN",
            "sendMsgCode",
            { code: this.code, mobile: this.info.mobile },
            (res) => {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              this.$u.toast("验证码已发送");
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            },
            true
          );
        } else {
          this.$u.toast("倒计时结束后再发送");
        }
      } else {
        if (!this.code) {
          this.$refs.verifyElement.reset();
          this.$u.toast("请拖动滑块验证");
        }
      }
    },
    submit() {
      let volid = this.volidInfo();
      if (volid) {
        let data = JSON.parse(JSON.stringify(this.info));
        $https(
          "POST",
          "changeMobile",
          data,
          (res) => {
            if (res.data.errcode == 0) {
              this.$u.toast("绑定成功");
            } else {
              this.$u.toast(res.data.errmsg);
            }
          },
          true
        );
      }
    },
    //验证表单
    volidInfo() {
      let info = this.info;
      let checkphone = this.volidPhone();
      if (!checkphone) {
        return false;
      } else if (!this.code) {
        this.$refs.verifyElement.reset();
        this.$u.toast("请拖动滑块验证");
        return false;
      } else if (!info.msg_code) {
        this.$u.toast("请输入验证码");
        return false;
      } else return true;
    },
    //验证手机号
    volidPhone() {
      if (!this.info.mobile) {
        this.$u.toast("请输入手机号");
        return false;
      } else if (
        !/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(this.info.mobile)
      ) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    //拖动滑块
    verifyResult(data) {
      if (data.flag) {
        $https(
          "GET",
          "getCode",
          {},
          (res) => {
            if (res.data.errcode == 0) {
              this.code = res.data.data.code;
            } else {
              this.$u.toast("验证失败，请重试");
              this.$refs.verifyElement.reset();
            }
          },
          true
        );
      } else {
        //验证失败
        return;
      }
    },

    leftClick() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack({
        delta: 1,
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.forget_pwd {
  .input_info {
    padding: 14rpx 34rpx 0;

    input {
      border-bottom: 1px solid #ececec;
      width: 100%;
      font-size: 26rpx;
      padding: 6px 0 1px;
      font-size: $font_4;
    }
    .label {
      font-size: $font_4;
      font-weight: 600;
      color: #191919;
    }
    .input {
      margin-bottom: 40rpx;
    }
  }

  .input_info {
    margin-top: 20rpx;

    // input {
    // 	margin-top: 6rpx;
    // }
  }
  .form_submit {
    margin-top: 100rpx;
  }

  .get_code {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      z-index: 10;
      position: absolute;
      right: 20rpx;
      background: #b3b3b3;
      padding: 6rpx 10rpx;
      color: $white;
      border-radius: 8rpx;
    }
  }
}

.placehoder_class {
  font-size: 50rpx;
  color: #c0c0c0;
}

.forget_pwd {
  .now_login {
    margin: 12px 0 31px;
    color: #9a9a9a;
  }

  .agreement {
    color: #59a88f;
  }
}

@media (max-width: 600px) {
  .forget_pwd_val {
    margin-bottom: 40rpx;
  }
}
</style>
